<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  
        <title>Railway Official Website</title>
        <link rel="stylesheet" href="css/foundation.css"/>
        <link rel="stylesheet" href="css/normalize.css"/>
        <link rel="stylesheet" href="css/jquery-ui.css" />
        <link rel="stylesheet" href="css/footable/footable.core.css"/>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/ui/jquery-ui.js"></script>
        <script src="js/vendor/custom.modernizr.js"></script>
        <script src="js/footable/footable.js"></script>
        <script src="js/announcement.js"></script>

        <?php
        session_start();
        include 'classes/DBCon.php';
        ?>
        <style type="text/css">
        fieldset { border:1px solid grey }
        legend {
              padding: 0.2em 0.5em;
              border:2px solid white;
              color:black;
              font-size:150%;
              text-align:left;
        }
	</style>
        <script>
            $(document).ready(function() {
            $('.footable').footable();
            });       
        </script>
    </head>
    <body>
        
        <div id='overlay' style="display:none; opacity: 0.4;position: fixed;top: 0;left: 0;background-color: black;width: 100%;z-index: 5000;">
            <img src="img/loader.gif" style="opacity:1; position: absolute; top: 50%;left: 50%;margin-left:-16px;
                 margin-top:-16px';"/>
        </div>
        <div>
            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name" onClick="void(0);">
                        <h1><a href="#">Railway Official Website</a></h1>
                    </li>
                    <li class="divider"></li>
                    <li class="toggle-topbar menu-icon">
                        <a href="#"><span>menu</span></a>
                    </li>
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="divider"></li>
                        <li><a href="index.php">Home</a></li>
                        <li class="divider"></li>
                        <li><a href="index.php">Forum</a></li>
                        <li class="divider"></li>
                        <?php
                        if ($_SESSION['groupId']==1) {
                            //Reveal the Announcement Maintenance Links
                            echo '<li><a href="announcementMaintenance.php">Announcement</a></li>';
                            echo '<li class="divider"></li>';
                        }else{
                            //Invisible AnnouncementMaintenance
                        }
                        ?>
                        <?php
                        if (isset($_SESSION['username'])) {
                            echo '<li><a href="profile.php?mode=21">My profile</a></li>';
                            echo '<li class="divider"></li>';
                            echo '<li><a href="logout.php">Logout</a></li>';
                            echo '<li class="divider"></li>';
                        }
                        else
                            echo '<li><a href="loginPage.php">Login</a></li>';
                        echo '<li class="divider"></li>';
                        ?>
                    </ul>
                </section>
            </nav>
        </div>
        
<div class="row">
            <?php
            if (isset($_SESSION['username']) && $_SESSION['groupId']==1) {
                ?>
                <div class="columns">
                    <div clas="row">
                        <div class="large-9 push-3 columns">
                            <div class="row">
                                <?php
                                if (isset($_GET['mode'])) {
                                    $mode = $_GET['mode'];
                                    switch ($mode) {
                                        case 1;
                                            require_once 'classes/Announcement.php';
                                            ?>
                                            <div class="large-11 large-offset-1 columns">
                                                <div id="content">
                                                    <h3>Welcome, <?php echo $_SESSION['username']; ?>!</h3>
                                                    <div class="row">
                                                        <div class="columns">

                                                        </div>
                                                    </div>
                                                    <hr/>
                                                     <div class="row">
                                                        <div class="columns">
                                                            <h5 class="subheader">Recently Announcement :</h5>
                                                            <div class="row">
                                                                <div class="columns">
                                                                    <?php
                                                                        $Announce = new Announcement();
                                                                        $Announce->displayAnnouncementBoard();
                                                                        echo '<a href="announcementList.php"  style="size:6;text-align:right">View all</a>';
                                                                                ?>
                                                                            </tbody>
                                                                        </table>
                                                                        <hr/>
                                                                    </div>
                                                                </div>
                                                        </div>
                                                        <hr/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <?php
                                        break;
                                    case 2:
                                        ?>
                                        <script>
                $(document).ready(function() {
                $('li').removeClass('active');
                $('#2').addClass('active');
                });
                                        </script>
                                                <script type="text/javascript">
                                                    function submitAnnouncementForm(){
                                                        var array = [];
                                                        var allValidated = true;
                                                        if (nonEmptyValidation(title)) {
                                                            array.push(1);
                                                        } else {
                                                            array.push(0);
                                                        }
                                                        if (nonEmptyValidation(message)) {
                                                            array.push(1);
                                                        } else {
                                                            array.push(0);
                                                        }
                                                        if (validateFileType(imgFile)) {
                                                            array.push(1);
                                                        } else {
                                                            array.push(0);
                                                        }
                                                        if (validateYoutubeURL(videoLink)) {
                                                            array.push(1);
                                                        } else {
                                                            array.push(0);
                                                        }

                                                        for (var i = 0; i < array.length; i++) {
                                                            console.log('index ' + i + ' : ' + array[i]);
                                                            if (array[i] === 0) {
                                                                console.log('0 found at index ' + i);
                                                                allValidated = false;
                                                    //            break;
                                                            }
                                                        }

                                                        if(allValidated){
                                                            alert('allValidated = ' + allValidated);
//                                                            var fullImgPath = $('#imgFile').val();
//                                                            var filename = /([^\\]+)$/.exec(fullImgPath)[1];
//                                                            var elem = document.getElementById("imgName");
//                                                            elem.value = filename;
                                                            $.ajax({
                                                                type: 'POST',
                                                                url: 'action.php',
                                                                data: $('#announcementform').serialize(),
                                                                success: function(result){
                                                                    if(!result.error){
                                                                        $('#addErr').fadeIn('fast').addClass('success').removeClass('alert').html(result.message).delay(4000).fadeOut('slow');

                                                                        alert('g');
                                                                    }else{
                                                                        alert('b');
                                                                         $('#addErr').fadeIn('fast').addClass('alert').removeClass('success').html(result.message).delay(4000).fadeOut('slow');
                                                                    }
                                                                }

                                                            });
                                                        }else{
                                                            alert('nonValidated');
                                                        }
                                                    }
                                                </script>

                                        <div id="info" class="large-11 large-offset-1 columns alert-box" data-alert style="display: none">
                                        </div>
                                        <div class="large-11 large-offset-1 columns">
                                            <?php 

print_r($_FILES);
?>
                                            <fieldset>
                                            <legend>New Announcement</legend>
                                            <form class="custom"  id="announcementform" method="post" enctype="multipart/form-data">
                                                <input type="hidden" id="action" name="action" value="addNewAnnouncement"/>
                                                <input type="hidden" id="imgName" name="imgName" value=""/>
                                                
                                                    <div class="row">
                                                        <div class="large-4 columns"> 
                                                            <label for="title" class="inline">Title</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                            <input id="title" name="title" type="text" placeholder="Enter announcement title" onblur="nonEmptyValidation(this);"/> 
                                                            <small id="titleErr" class="error" style="display: none">Required field</small> 
                                                        </div> 
                                                    </div> 
                                                    <div class="row"> 
                                                        <div class="large-4 columns"> 
                                                            <label for="new" class="inline">Announcement Type</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                            <select id="type" name="type">
                                                                <option value="General">General</option>
                                                                <option value="Event">Event</option>
                                                                <option value="Service">Service</option>
                                                            </select>
                                                        </div>
                                                    </div> 
                                                    <div class="row"> 
                                                        <div class="large-4 columns"> 
                                                            <label for="message" class="inline">Message</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                            <textarea id="message" name="message" type="text" placeholder="Message Content" maxLength="500" rows="10" style="table-layout: fixed;width: 100%; height: 100%" onblur="nonEmptyValidation(this);" ></textarea> 
                                                            <small id="messageErr" class="error" style="display: none">Required field</small> 
                                                            <p size="6" id="charcounter"/>
                                                           
                                                        </div> 
                                                    </div>
                                                    <div class="row">
                                                        <div class ="large-4 columns">
                                                            <label for="imgFile" class="inline">Image</label>
                                                        </div>
                                                        <div class="large-7 columns">
                                                            <input id="imgFile" name="imgFile" type="file" placeholder="Upload images" size="50" onblur="validateFileType(this);"/>
                                                            <small id="imgFileErr" class="error" style="display:none">File type is not allowed</small>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="large-4 columns">
                                                            <label for="videoLink" class="inline">Video Link</label>
                                                        </div>
                                                        <div class="large-7 columns">
                                                            <input id="videoLink" name="videoLink" type="text" placeholder="Enter video link" onblur="validateYoutubeURL(this);"/>
                                                            <small id="videoLinkErr" class="error" data-alert style="display:none">Invalid video link</small>
                                                        </div>
                                                    </div>
                                                    <hr/> 
                                                    <div class="row"> 
                                                        <div class="large-12 columns"> 
                                                            <input type="button" id="submit1" value="Submit" class="button right small" onclick="submitAnnouncementForm();"/>  
                                                        </div> 
                                                    </div> 
                                                    <div class="alert alert-box" data-alert id="addErr" style="display: none">Error!</div>
                                                    </form>
                                                </fieldset> 
                                            
                                        </div>
                                        <?php
                                        break;
                                    case 3:
                                        ?>
                                        <script>
                $(document).ready(function() {
                $('li').removeClass('active');
                $('#3').addClass('active');
                });
                                        </script>  
                                       
                                        
                                        <?php
                                        include_once 'classes/Announcement.php';
                                        $annn = new Announcement();
                                        $annn->listSelectUpdateAnnouncement();
                                        break;
                                        ?>
                                        
                                        <?php
                                        break;
                                    case 4:
                                        ?>
                                        <script>
                $(document).ready(function() {
                $('li').removeClass('active');
                $('#4').addClass('active');
                });

                                        </script> 
                                        <script type="text/javascript">
                                            
                                        </script>
                                        <div id="info" class="large-11 large-offset-1 columns alert-box" data-alert style="display: none">
                                        </div>
                                        <div class="large-11 large-offset-1 columns">
                                            <fieldset>
                                            <legend>Modify Announcement</legend>
                                            <form class="custom" id="announcementupdateform" enctype="multipart/form-data">
                                                <input type="hidden" id="action" name="action" value="modifyAnnouncement"/>
                                                <input type="hidden" id="imgName" name="imgName" value=""/>
                                                <input type="hidden" id="anID" name="anID" value="<?php echo $_REQUEST['aid'];?>" />
                                                    <?php
                                                        include_once 'classes/Announcement.php';
                                                        $an = new Announcement();
                                                        $result = $an->getAnnouncementDetails($_REQUEST['aid']);
                                                    ?>
                                                <div class="row">
                                                        <div class="large-4 columns"> 
                                                            <label for="aid" class="inline">Announcement ID</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                            <input id="aid" name="title" type="text" value="<?php echo $result['aid'];?>" readonly/> 
                                                        </div> 
                                                    </div> 
                                                
                                                    <div class="row">
                                                        <div class="large-4 columns"> 
                                                            <label for="title" class="inline">Title</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                            <input id="title" name="title" type="text" placeholder="Enter announcement title" value="<?php echo $result['title'];?>" onblur="nonEmptyValidation(this);"/> 
                                                            <small id="titleErr" class="error" style="display: none">Required field</small> 
                                                        </div> 
                                                    </div> 
                                                    <div class="row"> 
                                                        <div class="large-4 columns"> 
                                                            <label for="new" class="inline">Announcement Type</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                        <select id="type" name="type" >                                                            
                                                            <option value="General" <?php if($result['type']=='General'){echo 'SELECTED';}?>>General</option>
                                                            <option value="Event"<?php if($result['type']=='Event'){echo 'SELECTED';}?>>Event</option>
                                                            <option value="Service"<?php if($result['type']=='Service'){echo 'SELECTED';}?>>Service</option>
                                                        </select>
                                                    </div>

                                                    </div> 
                                                    <div class="row"> 
                                                        <div class="large-4 columns"> 
                                                            <label for="message" class="inline">Message</label> 
                                                        </div> 
                                                        <div class="large-7 columns"> 
                                                            <textarea id="message" name="message" type="text" placeholder="Message Content" maxLength="500" rows="10" style="table-layout: fixed;width: 100%; height: 100%" onblur="nonEmptyValidation(this);" ><?php echo $result['message'];?></textarea> 
                                                            <small id="messageErr" class="error" style="display: none">Required field</small> 
                                                            <p size="6" id="charcounter"/>
                                                           
                                                        </div> 
                                                    </div>
                                                    <div class="row">
                                                        <div class ="large-4 columns">
                                                            <label for="imgFile" class="inline">Image</label>
                                                        </div>
                                                        <div class="large-7 columns">
                                                            <input id="imgFile" name="imgFile" type="file" placeholder="Upload images" size="50" onblur="validateFileType(this);"/>
                                                            <small id="imgFileErr" class="error" style="display:none">File type is not allowed</small>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="large-4 columns">
                                                            <label for="videoLink" class="inline">Video Link</label>
                                                        </div>
                                                        <div class="large-7 columns">
                                                            <input id="videoLink" name="videoLink" type="text" value="<?php echo $result['videoEmbLink'];?>" placeholder="Enter video link" onblur="validateYoutubeURL(this);"/>
                                                            <small id="videoLinkErr" class="error" data-alert style="display:none">Invalid video link</small>
                                                        </div>
                                                    </div>
                                                    <hr/> 
                                                    <div class="row"> 
                                                        <div class="large-12 columns"> 
                                                            <input type="button" id="submit" value="Submit" class="button right small" onclick="modifyAnnouncementForm();"/>  
                                                        </div> 
                                                    </div> 
                                                    <div class="alert alert-box" data-alert id="updateErr" style="display: none">Error!</div>
                                                    </form>
                                                </fieldset> 
                                        </div>
                                        <?php
                                        break;
                                    case 5:
                                        ?>
                                        <script>
                $(document).ready(function() {
                $('li').removeClass('active');
                $('#5').addClass('active');
                });
                                        </script> 
                                        <script type="text/javascript">
                                            function az(){
                                                    var status = false;
                                                    var counted = document.getElementById('counts').value;
                                                    var totalSelected = 0;
                                                    var id;
                                                    for(var i = 1; i <=counted ; i++){
                                                        id = document.getElementById('c'+i);
                                                        if(id.checked){
                                                            totalSelected++;
                                                            status = true;
                                                        }

                                                    }
                                                    $('#totalSelect').val(totalSelected);
                                                    
                                                    if(status){
                                                        if(confirm('Are you confirm to delete?!')){
                                                            $.ajax({
                                                                type: 'POST',
                                                                url: 'action.php',
                                                                data: $('#announcementdeleteform').serialize(),
                                                                success: function(result){
                                                                    if(!result.error){                                                           
                                                                        $('#deleteErr').fadeIn('fast').addClass('success').removeClass('alert').html(result.message).delay(4000).fadeOut('slow');
                                                                        setTimeout(refreshPage, 5000);
           
                                                                    }else{
                                                                         $('#deleteErr').fadeIn('fast').addClass('alert').removeClass('success').html(result.message).delay(4000).fadeOut('slow');
                                                                    }
                                                                }
                                                            });
                                                        }
                                                    }else{
                                                        alert('You must select one of the checkbox to proceed');
                                                    }
                                                    
                                                    return false;
                                                }
                                                
                                                function refreshPage(){
                                                    location.reload(window.location);
                                                }
                                            
                                        </script>
                                        <div id="info" class="large-11 large-offset-1 columns alert-box" data-alert style="display: none">
                                        </div>
                                        <div class="large-11 large-offset-1 columns">
                                            <fieldset>
                                            <legend>Delete Announcement</legend>
                                            <form class="custom" id="announcementdeleteform" enctype="multipart/form-data">
                                                <input type="hidden" id="action" name="action" value="deleteAnnouncement"/>
                                                <input type="hidden" id="totalSelect" name="totalSelect" value=""/>
  
                                                <div class="large-15 columns">
                                                <li style="list-style-type:none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>ID</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    &nbsp;&nbsp;&nbsp;&nbsp;<b>Date</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <b>Title</b>
                                                </div>
                                                <hr />
                                                <div class="row">
                                                    <div class="large-12 columns">
                                                        <?php 
                                                            include_once 'classes/Announcement.php';
                                                            $anc = new Announcement();
                                                            echo $anc->getAnnouncementArrayDelete();
                                                        ?>
                                                        
                                                        <br />
                                                    </div>
                                                </div>
                                                    <hr/> 
                                                    <div class="row"> 
                                                        <div class="large-12 columns"> 
                                                            <input type="button" id="submit" value="Delete" class="button right small" onclick="az();"/>  
                                                        </div> 
                                                    </div> 
                                                    <div class="alert alert-box" data-alert id="deleteErr" style="display: none">Must not be empty</div>
                                                    </form>
                                                </fieldset> 
                                        </div>
                                        <?php
                                        break;
                                        case 6:
                                        ?>
                                        <script>
                $(document).ready(function() {
                $('li').removeClass('active');
                $('#6').addClass('active');
                });
                                        </script> 
                                        <script type="text/javascript">
                                            function submitRestoreForm(){
                                                    var status = false;
                                                    var counted = document.getElementById('counts').value;
                                                    var totalSelected = 0;
                                                    var id;
                                                    for(var i = 1; i <=counted ; i++){
                                                        id = document.getElementById('c'+i);
                                                        if(id.checked){
                                                            totalSelected++;
                                                            status = true;
                                                        }

                                                    }
                                                    $('#totalSelect').val(totalSelected);
                                                    
                                                    if(status){
                                                        if(confirm('Are you confirm to restore?!')){
                                                            $.ajax({
                                                                type: 'POST',
                                                                url: 'action.php',
                                                                data: $('#announcementrestoreform').serialize(),
                                                                success: function(result){
                                                                    if(!result.error){
                                                                        $('#restoreErr').fadeIn('fast').addClass('success').removeClass('alert').html(result.message).delay(4000).fadeOut('slow');
                                                                        setTimeout(refreshPage, 5000);
                                                                    }else{
                                                                         $('#restoreErr').fadeIn('fast').addClass('alert').removeClass('success').html(result.message).delay(4000).fadeOut('slow');
                                                                    }
                                                                }
                                                            });
                                                        }
                                                    }else{
                                                        alert('You must select one of the checkbox to proceed');
                                                    }
                                                    
                                                    return false;
                                                }
                                                
                                                function refreshPage(){
                                                    location.reload(window.location);
                                                }
                                            
                                        </script>
                                        <div id="info" class="large-11 large-offset-1 columns alert-box" data-alert style="display: none">
                                        </div>
                                        <div class="large-11 large-offset-1 columns">
                                            <fieldset>
                                            <legend>Restore Announcement</legend>
                                            <form class="custom" id="announcementrestoreform" enctype="multipart/form-data">
                                                <input type="hidden" id="action" name="action" value="restoreAnnouncement"/>
                                                <input type="hidden" id="totalSelect" name="totalSelect" value=""/>
  
                                                <div class="large-15 columns">
                                                <li style="list-style-type:none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>ID</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Date</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <b>Title</b>
                                                </div>
                                                <hr />
                                                <div class="row">
                                                    <div class="large-12 columns">
                                                        <?php 
                                                            include_once 'classes/Announcement.php';
                                                            $anc = new Announcement();
                                                            echo $anc->getAnnouncementArrayRestore();
                                                        ?>
                                                        
                                                        <br />
                                                    </div>
                                                </div>
                                                    <hr/> 
                                                    <div class="row"> 
                                                        <div class="large-12 columns"> 
                                                            <input type="button" id="submit" value="Restore" class="button right small" onclick="submitRestoreForm();"/>  
                                                        </div> 
                                                    </div> 
                                                <div class="alert alert-box" data-alert id="restoreErr" style="display: none">Must not be empty</div>
                                                    
                                                    </form>
                                                </fieldset> 
                                        </div>
                                        
                                        <?php
                                        break;
                                    case 7:
                                        ?>
                                        <script>
                $(document).ready(function() {
                $('li').removeClass('active');
                $('#7').addClass('active');
                });

                                        </script> 
                                        <script type="text/javascript">
                                            function getAncDetails(){
                                                var id = document.getElementById('aid').value;
                                                $.ajax({
                                                    type: 'POST',
                                                    url: 'action.php',
                                                    data: {action: 'populateAnnouncement', aid: id},
                                                    success: function(result) {
                                                        if (!result.error) {
                                                            document.getElementById('title').value= result.title;
                                                            document.getElementById('message').value = result.message;
                                                            
                                                            document.getElementById('image').src = result.graphic;
                                                            document.getElementById('link').href = result.videoEmbLink;
                                                            
                                                            var youtubeID = 'http://www.youtube.com/v/'+youtubeIDextract(result.videoEmbLink);
                                                            document.getElementById('link2').src = youtubeID;
                                                            document.getElementById('vLinks').value = result.videoEmbLink;
                                                            
 
                                                        }else{
                                                            
                                                        }
                                                    }
                                                });
                                                }
                                                
                                                function youtubeIDextract(url){ 
                                                    var youtube_id; 
                                                    youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1"); 
                                                    return youtube_id;
                                                }
                                                
                                                
                                                function sendEmail(){
                                                    document.getElementById('selects').value===0;
                                                    if(title.value.length===0 || message.value.length===0){
                                                        $('#SendEmailErr').fadeIn('fast').addClass('alert').removeClass('success').html('Please select announcement to send').delay(4000).fadeOut('slow');
                                                        document.getElementById('selects').value = 0;
                                                    }else{
                                                        if(chkStaff.checked && chkMember.checked){
                                                            document.getElementById('selects').value = 3;
                                                            alert('Staff and Member');
                                                            //$('#emailpromotionalform').hide();
                                                            //$('#info').fadeIn('fast').addClass('success').removeClass('alert').html('You have successfully sent the email').delay(4000).fadeOut('slow');
                                                        }else if(chkStaff.checked){
                                                            alert('Staff Only');
                                                            document.getElementById('selects').value = 1;
                                                        }else if(chkMember.checked){
                                                            alert('Member Only');
                                                            document.getElementById('selects').value = 2;
                                                        }else if(!chkStaff.checked || !chkMember.check){
                                                            $('#SendEmailErr').fadeIn('fast').addClass('alert').removeClass('success').html('Please select recipient to send').delay(4000).fadeOut('slow');
                                                            document.getElementById('selects').value = 0;
                                                        }
                                                    }
                                                    
                                                    alert(document.getElementById('selects').value);
                                                    if(document.getElementById('selects').value!=0){
                                                        alert('g');
                                                        $.ajax({
                                                            type: 'POST',
                                                            url: 'action.php',
                                                            data: $('#emailpromotionalform').serialize(),
                                                            success: function(result){
                                                                if(!result.error){
                                                                    alert('h');
                                                                    $('#emailErr').fadeIn('fast').addClass('success').removeClass('alert').html(result.message).delay(4000).fadeOut('slow');
                                                                }else{
                                                                    alert('i');
                                                                     $('#emailErr').fadeIn('fast').addClass('alert').removeClass('success').html(result.message).delay(4000).fadeOut('slow');
                                                                }
                                                            }
                                                        });
                                                    }else{
                                                        alert('Error');
                                                    }
                                                }
                                        </script>
                                        <div id="info" class="large-13 large-offset-1 columns alert-box" data-alert style="display: none">
                                        </div>
                                        <div class="large-13 large-offset-1 columns">
                                            <fieldset>
                                            <legend>Email Promotional</legend>
                                            <form class="custom" id="emailpromotionalform" enctype="multipart/form-data">
                                                <input type="hidden" id="action" name="action" value="emailPromotional"/>
                                                <input type="hidden" id="vLinks" name="vLinks" value=""/>
                                                <input type="hidden" id="selects" name="selects" value="" />
                                                <input type="hidden" id="ref" name="ref" value="<?php echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"/>
                                                
                                                <div class="row"> 
                                                    <div class="large-4 columns"> 
                                                        <label for="aid" class="inline">Announcement ID</label> 
                                                    </div> 
                                                    <div class="large-7 columns"> 
                                                        <select id="aid" name="aid" onchange="getAncDetails();">                                                            
                                                            <?php
                                                                include_once 'classes/Announcement.php';
                                                                $annc = new Announcement();
                                                                $annc->populateAnnouncementId();
                                                            ?>
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="row"> 
                                                    <div class="large-4 columns"> 
                                                        <label for="aid" class="inline">Announcement Title</label> 
                                                    </div> 
                                                    <div class="large-7 columns"> 
                                                        <input type="text" id="title" name="title" readonly/>
                                                    </div>
                                                </div>
                                                
                                                <div class="row"> 
                                                    <div class="large-4 columns"> 
                                                        <label for="message" class="inline">Message</label> 
                                                    </div> 
                                                    <div class="large-7 columns"> 
                                                        <textarea id="message" name="message" type="text" placeholder="Message Content" maxLength="500" rows="10" style="table-layout: fixed;width: 100%; height: 100%" readonly></textarea> 

                                                    </div> 
                                                </div>
                                                <br />
                                                
                                                <div class="row"> 
                                                    <div class="large-4 columns"> 
                                                        <label for="image" class="inline">Picture/Image</label> 
                                                    </div> 
                                                    <div class="large-7 columns"> 
                                                        <img src=""  id="image" width="380" height="315"/>

                                                    </div> 
                                                </div>
                                                <br />
                                                
                                                <div class="row"> 
                                                    <div class="large-4 columns"> 
                                                        <label for="videoLink" class="inline">Video Links</label> 
                                                    </div> 
                                                    <div class="large-7 columns"> 
                                                    <iframe id="link2"width="380" height="315" src="" frameborder="0" allowfullscreen></iframe><br />
                                                         <a href="www.youtube.com" id="link" target="_blank">Click here to open video links</a>
                                                    </div> 
                                                </div>
                                                
                                                <br />
                                                
                                                <div class="row"> 
                                                    <div class="large-4 columns"> 
                                                    <label for="new" class="inline">Send Email To</label> 
                                                    </div> 
                                                    <div class="large-7 columns"> 
                                                        <input type="checkbox" id="chkStaff" name="" value="">Staff</input>
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <input type="checkbox" id="chkMember" name="" value="">Member</input>
                                                    </div>
                                                </div> 
                                                    <hr/> 
                                                    <div class="row"> 
                                                        <div class="large-12 columns"> 
                                                            <input type="button" id="submit" value="Send Email" class="button right small" onclick="sendEmail();"/>  
                                                        </div> 
                                                    </div> 
                                                <div class="alert alert-box" data-alert id="emailErr" style="display: none">Must not be empty</div>
                                                    </form>
                                            
                                                </fieldset> 
                                        </div>
                                        
                            <?php
                                }
                                }else{
                            ?>
                                <div id="info" class="large-11 large-offset-1 columns alert-box" data-alert style="display: none">

                                </div>
                                <div class="large-11 large-offset-1 columns">
                                    <div id="content">
                                        <h3>Welcome, <?php echo $_SESSION['username']; ?>!</h3>
                                        <hr/>
                                        <p>Please make selection from the side navigation</p>
                                    </div>
                                </div>
                                <?php
                            }
                            ?>
                        </div>
                    </div>
                    <div class="large-3 pull-9 columns panel">
                        <a href="announcementMaintenance.php?mode=1"> <h5>Maintenance</h5></a>
                        <ul class="side-nav">
                            <li id="2"><a href="announcementMaintenance.php?mode=2">New Announcement</a></li>
                            <li class="divider"></li>
                            <li id="3"><a href="announcementMaintenance.php?mode=3">Modify Announcement</a></li>
                            <li class="divider"></li>
                            <li id="5"><a href="announcementMaintenance.php?mode=5">Delete Announcement</a></li>
                            <li class="divider"></li>
                            <li id="6"><a href="announcementMaintenance.php?mode=6">Restore Announcement</a></li>
                            <li class="divider"></li>
                            <li id="7"><a href="announcementMaintenance.php?mode=7">Send Email</a></li>
                            <li class="divider"></li>
                        </ul>
        </div>
                </div>
            </div>
            <?php
        } else {
            ?>
            <div class="row">
                <div class="large-10 large-offset-1 columns panel">
                    You do not have the permission to access this page.
                    <?php
                    if (isset($_SERVER['HTTP_REFERER'])) {
                        echo '<br/>Click <a href="' . $_SERVER['HTTP_REFERER'] . '">here</a> to back to previous page.';
                    }
                    ?>
                </div>
            </div>
            <?php
        }
        ?>
        
        <?php
        // put your code here
        ?>
        </div>
        <footer class="row">
            <div class="large-12 columns">
                <hr />
                <div class="row">
                    <div class="large-4 columns">
                        <p>&copy; Copyright 2013.</p>
                    </div>
                    <div class="large-6 columns">
                        <ul class="inline-list right">
                            <li><a href="aboutus.php">About Us</a></li>
                            <li><a href="contactus.php">Contact Us</a></li>
                            <li><a href="terms.php">Terms and Condition</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        <script src="js/foundation.min.js"></script>
        <script>
                                                        $(document).foundation();
        </script>
    </body>
</html>
